今天會用兩個例子來比較看看多個字串和一個物件多筆資料有什麼不同
第一個範例是在data中放「首頁」、「記事本」和「關於我」三個字串

第二個範例雖然也可以使用三個字串，但我們在製作網頁時標題、內文和照片通常是有關聯性的，所以在這個範例中我把這三個東西裝在一個diary物件中，這樣對於以後要進行專案修改或是如果在做比較中大型的專案的時候維護起來也比較容易
不過因為這裡只是在做字串和物件的比較，所以我使用的是前面介紹過的Lorem Picsum 假圖產生器和亂數假文產生器 Chinese Lorem Ipsum
製作的)

最後要介紹的是第二個範例在綁定資料的部分

        <div class="card">
          <img :src="diary.photo">
          <div class="txt">
            <h2>{{diary.title}}</h2>
            <p>{{diary.contents}}</p>
          </div>
        </div>

從這段程式碼中我們可以看出照片和文字綁定的方式是不一樣，這是為什麼呢?
在前面我們介紹過Mustache語法也就是我們在標題和內文中所使用{{}}的資料綁定，但因為Mustache語法不能在HTML屬性中使用，所以在這裡我們是使用v-bind指令綁定照片(v-bind縮寫為:)

github